import { useContext, useEffect, useRef } from 'react';
import { PurchaseSupplierStatisticsContext, disposeStatisticsData } from '../common';

//引入echarts主模块
import * as echarts from 'echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入饼状图
import 'echarts/lib/chart/pie';
// 引入标题和提示框
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import ReactDOM from 'react-dom';
import { Empty } from 'antd';

let supplierStaticsDivView: any; //相对方收付款统计

const StatisticsManageViewCenter = () => {
  /**
   * 解构上下文
   * */
  const { styleFixCls, statisticsData } = useContext(PurchaseSupplierStatisticsContext);

  /**
   * 供应商统计盒子Ref
   * */
  let supplierStaticsDivRef: any = useRef();

  useEffect(() => {
    if (statisticsData?.length) {
      initEchartsFunc();
    }
  }, [statisticsData]);

  /**
   * 渲染图表
   * */
  const initEchartsFunc = () => {
    /**
     * 方法处理详情数据
     * */
    const { statisticsNameData_y, statisticsData_y } = disposeStatisticsData(statisticsData);

    /**
     * 图表配置项
     * */
    const option: any = {
      title: {
        text: '采购供应商统计',
        left: 'center',
      },
      grid: {
        left: '8%',
        bottom: '5%',
        top: '14%',
        right: '8%',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      toolbox: {
        show: true,
        feature: {
          magicType: {
            mark: { show: true },
            show: true,
            type: ['line', 'bar'],
            title: {
              line: '切换为折线图',
              bar: '切换为柱状图',
            },
          },
        },
        right: '4%',
        padding: [30, 5],
      },
      calculable: true,
      yAxis: [
        {
          type: 'category',
          data: statisticsNameData_y,
          name: 'TOP10(供应商)',
          nameTextStyle: {
            color: '#000', // 字体颜色
            fontWeight: 'bold', // 字体粗细
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            formatter: (value: any) => {
              const newValue: string = value?.length > 8 ? `${value?.slice(0, 8)}...` : value;
              return value != 'null' ? newValue : '--';
            },
          },
        },
      ],
      xAxis: [
        {
          type: 'value',
          name: '金额/元',
          position: 'left',
          alignTicks: true,
          axisLine: {
            show: true,
          },
        },
      ],
      series: [
        {
          name: '金额',
          type: 'bar',
          data: statisticsData_y,
          label: {
            show: true,
            position: 'right',
          },
          itemStyle: {
            color: (params: any) => {
              let colorList = ['#11d1da', '#91c7ae', '#61a0a8', '#ca8622', '#d48265', '#2f4554', '#749f83', '#c23531'];
              return colorList[params.dataIndex];
            },
          },
        },
      ],
    };

    /**
     * 供应商统计渲染
     * */
    const allOppsiteViewDiv: any = ReactDOM.findDOMNode(supplierStaticsDivRef?.current);
    supplierStaticsDivView = echarts.init(allOppsiteViewDiv);
    supplierStaticsDivView.setOption(option, true);
  };

  return (
    <div
      className={styleFixCls + 'CenterBox'}
      style={{
        margin: '5px 0',
        background: '#fff',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {/* echarts图表 */}
      {statisticsData?.length ? (
        <div className={styleFixCls + 'CenterBox-EchartsRootDiv'} ref={supplierStaticsDivRef} />
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无【采购供应商统计】数据" />
      )}
    </div>
  );
};

export { StatisticsManageViewCenter };
